import { h, fragment } from '@knno/dom/jsx';
import { Picker, PickValue, PickUpdateOption, UIPicker } from '@knno/ui/jsx/picker';
import { Button } from '@knno/ui/jsx/button';
import { Toast } from '../../../dist/components/toast/toast';

function getMonth(): string[] {
	return Array(12)
		.fill(0)
		.map((_, i) => (i + 1 + '').padStart(2, '0'));
}

function getDay(selection: PickValue[][], option: PickUpdateOption): string[] {
	const m = parseInt(selection[option.gid][1] + '');
	let days: number;
	if ([1, 3, 5, 7, 8, 10, 12].includes(m)) {
		days = 31;
	} else if ([4, 6, 9, 11].includes(m)) {
		days = 30;
	} else {
		days = 29;
	}
	option.keepPosition = true;
	return Array(days)
		.fill(0)
		.map((_, i) => (i + 1 + '').padStart(2, '0'));
}

const dateOptions = [
	Array(100)
		.fill(0)
		.map((_, i) => (1970 + i + '').padStart(4, '0')),
	getMonth,
	getDay,
];

export function ShowPicker() {
	return (
		<>
			<h2>选择器</h2>
			<Picker title="选择日期" options={dateOptions} value={[['2023', '11', '21']]} />
			<h2>多个选择器组</h2>
			<Picker
				title="选择住宿时间"
				optionGroups={[
					{
						name: '入住日期',
						parts: dateOptions,
					},
					{
						name: '离开日期',
						parts: dateOptions,
					},
				]}
			/>
			<h2>弹出选择（手机采用 ActionSheet, PC 采用 Dialog）</h2>
			<Button
				onclick={async () => {
					const result = await UIPicker.show({
						title: '选择日期',
						options: dateOptions,
						selection: [['2023', '11', '21']],
					});
					Toast.show(result ? result[0].join('-') : '取消');
				}}
			>
				选择日期
			</Button>
		</>
	);
}
